<template>
  <div class="about">
    <header>
       <i class="iconfont icon-fanhui" @click="$router.back()"></i>
       <section>
         分类列表
       </section>
    </header>
    <div class="empty" v-if="goodsList.length == 0">
       <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F14417401997%2F1000&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644646697&t=bb4f6e3d249422c711cd3218802a299b" alt="">
       <p>暂无数据</p>
    </div>
    <ul>
      <li v-for="(item,index) in goodsList" :key="index">
        <img :src="item.pic" alt="">
        <p>{{item.name}}</p>
        <span style="color:red">￥{{item.minPrice}}</span>
      </li>
    </ul>
    
  </div>
</template>
<script>
import axios from 'axios';
import { reactive, toRefs } from 'vue';
import { useRoute } from 'vue-router';
export default {
  setup() {
    const route = useRoute();
    let id = route.params.id;
    const data = reactive({
      goodsList: [],
    })
    axios.get('https://api.it120.cc/small4/shop/goods/list').then(res => {
      data.goodsList = res.data.data.filter(item => item.categoryId == id);
    })
    return {
      ...toRefs(data)
    }
  }
}
</script>
<style lang="scss" scoped>
  .about{
    height: 100%;
    header{
      height: 50px;
      display: flex;
      align-items: center;
      font-size: 15px;
      .iconfont{
        width: 60px;
        text-align: center;
      }
      section{
        flex: 1;
        text-align: center;
      }
    }
    ul{
      height: calc(100% - 50px);
      overflow: auto;
      display: flex;
      padding: 0 10px;
      justify-content: space-between;
      flex-wrap: wrap;
      li{
        width: 48%;
        margin-bottom: 10px;
        position: relative;
        img{
          width: 100%;
        }
        p{
          position: absolute;
          left: 0;
          bottom: 30px;
          width: 100%;
          background: #F0EDD4;
          padding: 5px;
          font-size: 12px;
        }
      }
    }
  }
  .empty{
    img{
      display: block;
      width: 70%;
      margin: 40px auto;
    }
    p{
      text-align: center;
    }
  }
</style>